<template>
  <div class="dashboard-container">

    <el-form label-width="120px">
      <el-form-item label="新闻标题">
        <el-input v-model="newsVo.title"/>
      </el-form-item>
      <el-form-item label="新闻相关球员">
        <el-select v-model="value1" multiple placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="新闻相关国家">
        <el-select
          v-model="value2"
          multiple
          placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>


      <!-- 课程简介-->
      <el-form-item label="新闻内容">
        <tinymce :height="300" v-model="newsVo.context"/>
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <el-form-item label="上传封面">
        <el-upload
          class="upload-demo"
          action="http://localhost:8001/api/oss"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :onSuccess="uploadSuccess"
          :file-list="this.fileList"
          list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="save">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
  import player from '@/api/dbwork/player'
  import team from '@/api/dbwork/team'
  import news from '@/api/dbwork/news'
  import ImageCropper from '@/components/ImageCropper'
  import PanThumb from '@/components/PanThumb'
  import Tinymce from '@/components/Tinymce'
  export default {
    components: { ImageCropper, PanThumb,Tinymce },
    data() {
      return {
        options1: [],
        options2:[],
        value1: [],
        value2: [],
        newsVo:{},
        fileList:[],
        imagecropperShow:false,
        imagecropperKey:0,
        BASE_API:process.env.BASE_API,
        saveBtnDisabled:false
      }
    },
    created() {
      this.getPlayerData()
      this.getTeamData()
    },
    methods:{
      show(){
        console.log(this.value1)
        console.log(this.value2)
      },
      getPlayerData(){
        player.getAllPlayer()
        .then(response=>{
          this.options1 = response.data.items
        })
      },
      getTeamData(){
        team.getAllTeam()
        .then(response=>{
          this.options2 = response.data.list
        })
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      uploadSuccess(response, file, fileList){
            this.newsVo.cover = response.data.url
      },
      save(){
        this.newsVo.playerId = this.value1
        this.newsVo.teamId = this.value2
        news.addNews(this.newsVo)
          .then(response=>{
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.$router.push({path:'/news/table'})
          })
      }
    }
  }
</script>
<style scoped>
  .tinymce-container {
    line-height: 29px;
  }
</style>
